<template>
    <view class="login-content">
        <view class="login-title">
            登录
        </view>
        <view class="iphone">
            <input type="text" placeholder="输入账号:" v-model="username" @input="clearInput" />
            <uni-icons type="closeempty" color="#808080" size="25" v-if="showClearIcon" @click="clearIcon"></uni-icons>
        </view>

        <view class="password" v-if="type==2">
            <!-- <input type="password" placeholder="输入密码" /> 要显示密码就不要设置type="password"-->
            <input placeholder="请输入密码:" v-model="password" :password="showPassword" />
            <uni-icons type="eye-filled" color="#808080" size="25" @click="changePassword"></uni-icons>
        </view>
        <view class="mima">
            <view @click="fix()">修改密码</view>
            <view @click="fix1()">注册账号</view>
        </view>

        <view class="login-btn" @click="login()">登录</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                username: 'lisi', //账号
                password: '123123', //密码
                showPassword: true, //是否显示密码
                showClearIcon: false, //是否显示清除按钮
                type: 2, //登录的状态

            }
        },

        methods: {
            // 显示隐藏密码
            changePassword: function() {
                this.showPassword = !this.showPassword;
            },
            // 判断是否显示清除按钮
            clearInput: function(event) {
                this.username = event.detail.value;
                if (event.detail.value.length > 0) {
                    this.showClearIcon = true;
                } else {
                    this.showClearIcon = false;
                }
            },
            // 清除内容/隐藏按钮
            clearIcon: function() {
                this.iphoneValue = '';
                this.showClearIcon = false;
            },
            // 切换登录的方式
            setLoginType(type) {
                this.type = type
            },
            async login() {

                const {
                    data: res
                } = await uni.$request.post('/user/login', {
                    username: this.username,
                    password: this.password
                })

                if (res.code == 200) {
                    uni.setStorageSync('token', res.data.token);
                    uni.switchTab({
                        url: '/pages/my/my'
                    })
                    console.log("登录成功！");
                }
            },
            fix() {
                uni.navigateTo({
                    url: './mima/mima'
                })
            },
            fix1() {
                uni.navigateTo({
                    url: '/pkg/zhuce/zhuce'
                })
            }
        }
    }
</script>

<style scoped>
    .mima {
        display: flex;
        justify-content: space-around;
        font-size: 20px;
    }

    .login-content {
        padding: 70px 10px 35px;
        text-align: center;
        color: #333333;
    }

    .login-title {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 31px;
    }

    .login-content input {
        height: 50px;
        background: #F8F8F8;
        border-radius: 25px;
        text-align: left;
        padding: 15px;
        box-sizing: border-box;
        font-size: 15px;
    }

    .iphone,
    .password,
    .test {
        position: relative;
        margin-bottom: 30px;
    }

    .iphone .uni-icons,
    .password .uni-icons {
        position: absolute;
        top: 14px;
        right: 30px;
    }

    .test-btn,
    .password-btn {
        color: #ff8b33;
        font-size: 15px;
        text-align: right;
    }

    .get-test {
        color: #ff8b33;
        font-size: 15px;
        width: 122px;
        height: 50px;
        border: 1px solid #FF8B33;
        border-radius: 25px;
        line-height: 50px;
    }

    .test {
        display: flex;
        justify-content: space-between;
    }

    .login-btn {
        width: 355px;
        height: 45px;
        background: #FF8B33;
        border-radius: 36px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 45px;
        position: fixed;
        bottom: 60px;
    }
</style>
